<template>
  <div class="trend-inf">
    <div class="naviga">&nbsp;&nbsp;;{{$store.state.marketName}}&nbsp;>&nbsp;市场宏观趋势&nbsp;>&nbsp;机会威胁分析&nbsp;>&nbsp;趋势分析&nbsp;>&nbsp;趋势影响</div>
    <div class="inf-bar col-xs-12 clearfix">
      <p class="col-xs-2">趋势影响</p>
      <P  class="col-xs-2 router">
        <router-link
         class='go-router'
         :to="{path:'/full/marketMenu/targetMarketTrends/opportunityDetails/trendInfluence/checkMarket',query: {id:this.$route.query.id,aId:anaId}}"
        >
          市场校验&nbsp;&nbsp;&rsaquo;
       </router-link>
      </P>
      <P  class="col-xs-2 go-back" @click="$router.go(-1)">&lsaquo;&nbsp;&nbsp;返回上一步</P>
    </div>

    <div class="inf-con col-xs-12">

      <div class="col-xs-4 left">
           <p style='background:#eeeeee;height:40px;line-height:40px;padding-left:10px'>机会&威胁</p>

           <ul  @click="clickAnalysis(item,index)"  v-for="(item,index) in analysisData" >
              <el-tooltip    effect="dark"  :content="item.analysisResult" placement="top-start">
                <li>
                  <p class="img-box jihui" v-if="item.analysisType==='机会'"  />
                  <p class="img-box weixie" v-else-if="item.analysisType==='威胁'"  />
                  <span>{{item.analysisResult}}</span>
                </li>
              </el-tooltip>
            </ul>
             <!-- <li  v-for="(item,index) in analysisData" >
             <el-tooltip  @click="clickAnalysis(item,index)"   effect="dark "  :content="item.analysisResult" placement="top-start">
               <p class="img-box jihui" v-if="item.analysisType==='机会'"  />
               <p class="img-box weixie" v-else-if="item.analysisType==='威胁'"  />
               </el-tooltip>
               <span>{{item.analysisResult}}</span>

            </li> -->
      </div>
      <div class="col-xs-8 right">
        <div class="lable col-xs-12 clearfix" style="padding: 0">
          <div class="col-xs-3 detailButton" v-for="item,index in detailType">
            <h3

            @click='listBottom(item,index)'
            style="width: 100%;margin:0;border-radius:5px;">{{item}}</h3>
            </div>

        </div>
        <div class="right-bar clearfix">
          <p>趋势对{{article==""? first : article}}的影响（{{trendSAnalysisLen}}条）</p>
          <p @click="addlist">+&nbsp;添加影响</p>
        </div>
        <!--add输入框start-->
        <li v-if="show" style="border-bottom: none">
          <div class="marginBox">
            <p style='width:70%;padding-left:20px;' ><el-input maxlength=160 v-model="addInput" placeholder="请输入内容"></el-input></p>
            <p style='width:15%;cursor: pointer;text-align:center'  @click="add()">保存</p>
            <p style='width:15%;cursor: pointer;text-align:center'  @click="noShow">取消</p>
          </div>
        </li>
        <!--add输入框end-->
        <li class="col-xs-12" v-for="item,index in trendsAnalysis" style="border-bottom: none">
          <div class="marginBox">
            <el-tooltip opper-class="test"  v-if="!item.pShow"  effect="dark"  :content="item.analysisDetail" placement="top-start">
              <p style='width:70%;padding-left:20px;' >{{item.analysisDetail}}</p>
            </el-tooltip>
            <!--<p style='width:70%;padding-left:20px;' v-if="!item.pShow">{{item.analysisDetail}}</p>-->
            <p style='width:70%;padding-left:20px;' v-else><el-input v-model="item.analysisDetail"></el-input></p>
            <p style='width:15%;cursor: pointer;text-align:center'  @click="isOr(item)">{{ item.pShow? '确定':'编辑'}}</p>
            <p style='width:15%;cursor: pointer;text-align:center' @click="delate(item)">删除</p>
          </div>
        </li>
      </div>
    </div>
  </div>
</template>
<script>
// let arr= [
//       {
//           "id": 469,
//           "analysisId": 21,
//           "marketId": 9,
//           "detailType": "地理位置",
//           "analysisDetail": "使用地区广泛",
//           "creator": null,
//           "detailList": null
//       },
//       {
//           "id": 467,
//           "analysisId": 21,
//           "marketId": 9,
//           "detailType": "地理位置",
//           "analysisDetail": "使用地区广泛",
//           "creator": null,
//           "detailList": null
//       }
//   ]

// for(let item in arr){
//   arr[item].pShow=false
// }
export default {
  data() {
    return {
      // arr:arr,
      // list:[],
      input1: "",
      show: false,
      addInput: "",
      arrNew: [],
      pShow: false,
      marketId: "",
      analysisData: [],
      detailType: [
        "地理位置",
        "人口（公司）特征",
        "影响购买行为",
        "购买决定因素",
        "应用场景",
        "获得销售利润潜力",
        "价值观生活方式",
        "沟通态度"
      ],
      trendsAnalysis: [],
      isActive: false,
      anaId: "",
      article: "",
      detailTypeValue: "",
      first: "地理位置",
      trendSAnalysisLen: ""
    };
  },
  mounted() {
    let id = this.$store.state.id;
    this.marketId = id;
    this.queryAnalysis(id);
    $(".detailButton h3")
      .eq(0)
      .addClass("active1");
  },
  methods: {
    //获取机会威胁的分析
    queryAnalysis(id) {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getOpportunityAnalysis",
          query: {
            marketId: id
            //"analysisType":"机会"
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.analysisData = res.data.data.list;
            if (Object.keys(res.data.data.list).length == 0) {
              this.trendSAnalysisLen = 0;
              return;
            }
            // console.log(67890)
            this.$nextTick(function() {
              $(".left ul")
                .eq(0)
                .addClass("active");
            });
            let firstAnalysis = res.data.data.list[0];
            let analysisId = res.data.data.list[0].id;

            this.anaId = analysisId;

            let firstDetailType = this.detailType[0];
            this.detailTypeValue = firstDetailType;
            console.log(34567890);
            this.getTrendsAnalysis({
              analysisId: analysisId,
              detailType: firstDetailType
            });
          }
        })
        .catch(error => {});
    },
    //点击机会威胁的分析结果
    clickAnalysis(item, index) {
      this.article = "";
      $(".left ul")
        .eq(index)
        .addClass("active")
        .siblings()
        .removeClass("active");
      $(".detailButton h3")
        .eq(0)
        .addClass("active1")
        .parent()
        .siblings()
        .find("h3")
        .removeClass("active1");

      console.log(this.analysisData);
      console.log(item.id);
      let analysisId = item.id;
      this.anaId = analysisId;
      let firstDetailType = this.detailType[0];
      this.detailTypeValue = firstDetailType;
      console.log(firstDetailType);
      this.getTrendsAnalysis({
        analysisId: analysisId,
        detailType: firstDetailType
      });
    },
    //点击article获取最下面列表
    listBottom(item, index) {
      console.log(index);
      this.article = item;
      $(".detailButton h3")
        .eq(index)
        .addClass("active1")
        .parent()
        .siblings()
        .find("h3")
        .removeClass("active1");
      console.log(item);
      this.detailTypeValue = item;
      this.getTrendsAnalysis({ analysisId: this.anaId, detailType: item });
    },
    //获取趋势分析细分影响
    getTrendsAnalysis(param) {
      console.log(param.analysisId + "tiao");
      if (param.analysisId === "") {
        this.trendSAnalysisLen = 0;
        return;
      }
      this.$http
        .post(this.GLOBAL.host, {
          method: "getOpportunityAnalysisDetail",
          query: param
        })
        .then(res => {
          if (res.data.code == 200) {
            let arr = res.data.data;
            for (let item in arr) {
              arr[item].pShow = false;
            }
            this.trendsAnalysis = arr;
            this.trendSAnalysisLen = arr.length;
          }
        })
        .catch(error => {});
    },

    //控制输入框的显示
    addlist() {
      if (Object.keys(this.analysisData).length == 0) {
        this.$message({
          message: "请先添加机会或威胁",
          type: "error"
        });
        return;
      }

      this.show = true;
      this.addInput = "";
    },
    //取消控制输入框的隐藏
    noShow() {
      this.show = false;
    },
    //保存给原有数组添加一条信息
    add() {
      if (this.addInput != "") {
        //直接调添加接口

        console.log(
          this.anaId,
          this.marketId,
          this.detailTypeValue,
          this.addInput
        );

        this.$http
          .post(this.GLOBAL.host, {
            method: "addOpportunityAnalysisDetail",
            data: {
              analysisId: this.anaId,
              marketId: this.marketId,
              detailType: this.detailTypeValue,
              analysisDetail: this.addInput
            }
          })
          .then(res => {
            if (res.data.code == 200) {
              this.trendsAnalysis = res.data.data;
              //刷新
              this.getTrendsAnalysis({
                analysisId: this.anaId,
                detailType: this.detailTypeValue
              });
            }
          })
          .catch(error => {});
        //成功后，
        this.show = false;
      }
    },
    isOr(e) {
      if (e.pShow) {
        this.$http
          .post(this.GLOBAL.host, {
            method: "updateOpportunityAnalysisDetail",
            data: {
              id: e.id,
              analysisDetail: e.analysisDetail
            }
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: "修改成功",
                type: "success"
              });
              //刷新
              //  this.getTrendsAnalysis({analysisId:this.anaId,detailType:this.detailTypeValue})
            } else {
              this.$message({
                message: "修改失败",
                type: "error"
              });
            }
          })
          .catch(error => {});
      }
      e.pShow = e.pShow == true ? false : true;
    },
    delate(e) {
      this.$http
        .post(this.GLOBAL.host, {
          method: "delOpportunityAnalysisDetail",
          data: {
            id: e.id
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            //刷新
            this.getTrendsAnalysis({
              analysisId: this.anaId,
              detailType: this.detailTypeValue
            });
          } else {
            this.$message({
              message: "删除失败",
              type: "error"
            });
          }
        })
        .catch(error => {});
    }
  }
};
</script>
<style lang="less" scoped>
.trend-inf {
  width: 100%;
  height: auto;
  background: #f6f6f6;
  .test{
    background: #1ab394 !important;
    width:100px;
  }

  .go-router {
    color: #fff;
    text-decoration: none;
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  .go-back {
    cursor: pointer;
    padding: 0;
  }
  .router {
    padding: 0;
  }
  .naviga {
    width: 100%;
    height: 35px;
    line-height: 35px;
    padding-left: 5px;
    background-color: white;
    font-size: 14px;
    border-bottom: 2px solid #e3e3e3;
  }
  .detailButton {
    margin-bottom: 20px;

    text-align: center;
    > h3 {
      font-size: 14px;
      line-height: 40px;
      height: 40px;
      border: 1px solid #e0e0e0;
      border-radius: 2px;
      cursor: pointer;
    }
  }
  .active {
    background: #d9effc;
    color: #3aaaec;
  }
  .active1 {
    background: #3aaaec;
    color: #fff;
    border: none;
  }

  li {
    list-style: none;
  }
  .inf-bar {
    width: 100%;
    height: 45px;
    line-height: 40px;
    margin-top: 20px;
    background: #fff;
    p {
      height: 45px;
    }
    p:nth-child(1) {
      float: left;
    }
    p:nth-child(2) {
      float: right;
      background: linear-gradient(to right, #3bc9e2, #08acf2);
      text-align: center;
      color: #fff;
      border-radius: 5px;
      height: 40px;
      margin-top: 3px;
    }
    p:nth-child(3) {
      float: right;
      text-align: center;
      color: #fff;
      border-radius: 5px;
      background: #acc6d3;
      margin-right: 10px;
      height: 40px;
      margin-top: 3px;
    }
  }
  .inf-con {
    > .left {
      background: #fff;
      height: 600px;
      overflow: scroll;
      margin-top: 20px;
      padding: 0;
      > ul {
        height: 70px;
        line-height: 70px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-bottom: 1px solid #e0e0e0;
        display: flex;
        li {
          width: 100%;
          display: flex;
          img {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            margin-left: 20px;
            margin-top: 24px;
          }
          span {
            padding-left: 20px;
            display: inline-block;
            font-size: 14px;
            width: 84%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        p {
          height: 50px;
          line-height: 50px;
          font-size: 14px;
          background: #eeeeee;
          padding-left: 10px;
        }
        .img-box {
          // background-origin: 50% 50%;
          // background-size: cover;
          width: 22px;
          height: 22px;
          margin-top: 24px;
          margin-left: 10px;
          &.jihui {
            background-image: url(../../../images/jihui.png);
          }
          &.weixie {
            background-image: url(../../../images/weixie.png);
          }
        }
      }
    }
    .right {
      height: 600px;
      overflow: scroll;
      margin-top: 20px;
      .marginBox {
        font-size: 14px;
        display: flex;

        > p {
          margin-bottom: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        > p:nth-child(1) {
          color: #666666;
        }
      }
      li {
        height: 70px;
        background: #fff;
        border: 1px solid #e0e0e0;
        p {
          height: 70px;
          line-height: 70px;
          color: #00a4eb;
        }
      }
      .right-bar {
        background: #f6f6f6;
        font-size: 14px;
        margin-bottom: 10px;
        > p:nth-child(1) {
          float: left;
          line-height: 40px;
          margin-top: 20px;
          padding-left: 20px;
        }
        > p:nth-child(2) {
          float: right;
          height: 40px;
          border: 1px solid #b1b1b1;
          border-radius: 2px;
          padding: 0 20px;
          line-height: 40px;
          margin-top: 20px;
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
